<template>
  <div class="broad_list_detail">
    <div class="detailBox">
      <div class="detailWrap" v-if="!isListShow">
        <div class="detailItem" v-show="isDetailItem">
          <ul>
              <li v-for="(temp,index) in search_list_array.broad" 
              :key="index+'_key'" @click="openBroadItem(temp)"
              class="listInfo" :class="[broad_show_item==temp?'select_act':'listInfoBg']">
                  <div style="width:100%">
                      <p class="item">
                          <span class="title">
                              <img v-if="temp.isRead == 0" src="static/image/search/tag_unread.png"/>            
                              {{temp.title}}
                          </span>
                          <span class="grey">{{ temp.name }} | {{ temp.time | getTimeAll }}</span>
                      </p>
                      <p>
                          <span
                              class="grey"
                              v-html="
                              $replaceKeyWords(
                                  temp.value,
                                  oldsearchval,
                                  '#fa7500',
                                  16
                              )
                              "
                          ></span>
                      </p>
                  </div>
              </li>
          </ul>
        </div>
        <div class="detailMiddle">
          <div class="detail_in">
            <img src="static\image\search\page_back.png" alt="" @click="$emit('back',false)">
            <span style="color:#e6e6e6;margin:0 16px">|</span>
            <h3>广播详情</h3>
          </div>
          <div class="detail_in">
            <div class="btn_d">
              <img src="static\image\home\page_last_s.png" style="width:16px;height:16px;" @click="itemNext(-1)"
              :class="{pageNot:search_list_array.broad.findIndex(i=>i.messageId==recordId)==0?true:false}" />
              <img src="static\image\home\page_next_s.png" style="width:16px;height:16px;" @click="itemNext(1)" 
              :class="{pageNot:search_list_array.broad.findIndex(i=>i.messageId==recordId)==search_list_array.broad.length-1?true:false}" />
            </div>
            <span style="color:#e6e6e6;margin:0 8px 0 3px">|</span>     
            <span>
              记录：{{search_list_array.broad.findIndex(i=>i.messageId==recordId)+1}}/{{search_list_array.broad.length}}
            </span>          
            <div class="number" @click="isDetailItem=!isDetailItem">
              <img v-show="isDetailItem" src="static\image\home\record_fold.png" style="width:10px;height:10px;" />
              <img v-show="!isDetailItem" src="static\image\home\popup_collect.png" style="width:10px;height:10px;" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="broad_main_w">
      <div class="broad_main_info">
        <img src="static/image/search/app_broadcast.png" alt="">
        <div>
          <div class="b_m_t">
            <span>{{ broad_show_item.title }}</span>
          </div>
          <div class="b_m_n">
            <span>{{ broad_show_item.name }}</span>
            <span class="b_m_l"></span>
            <span class="b_m_time">{{ broad_show_item.time | getTimeAll }}</span>
          </div>
        </div>
      </div>
      <div class="b_m_v_w">
        <div class="b_m_c" v-html="$replaceKeyWords(broad_show_item.value,oldsearchval,'#fa7500')"></div>
        <div class="b_m_f">
          <div class="broad_file_wrap" v-for="(item, index) in broad_show_item.files" :key="'broad_' + index">
            <div class="broad_f_l"></div>
            <div class="broad_f_r">
              <div class="broad_f_name">{{ item.attachName }}</div>
              <div class="broad_f_size">
                <span class="broad_f_size_text">{{item.attachsize | convertByte}}</span>
                <span v-if="item.upload!=1" class="broad_f_dl" @click.stop.prevent="downFile(item)">下载</span>
              </div>
              <Progress class="broad_p" v-if="item.upload==1" :percent="item.progress?item.progress:0" status="active"></Progress>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  props: {
    pageBroadList: {
      type: Array,
      default: () => {
        return []
      }
    },
    broad_show_item: {
      type: Object
    },
    broad_show_item_index: {
      type: Number
    },
    isListShow:{
      type:Boolean
    },
    recordId:{
      type: String,
    }
  },
  data() {
    return {
      isTriggerPageUp: false,
      isTriggerPageDown: false,
      typePage: "",
      isDetailItem: false,
    };
  },
  watch: {
    pageBroadList() {
      if (this.typePage == "upPage") {
        this.isTriggerPageUp = true;
        this.isTriggerPageDown = false;
      } else if (this.typePage == "downPage") {
        this.isTriggerPageUp = false;
        this.isTriggerPageDown = true;
      }
    },
    typePage() {
      this.pageBroadList();
    }
  },
  computed: {
    ...mapState(["myInfo"]),
    search_list_array:{
        get(){
            return this.$store.state.search_list_array
        },
        set(val){
            this.$store.commit('setsearchListArr',val)
        }
    },
    oldsearchval:{
        get(){
            return this.$store.state.oldsearchval
        },
        set(val){
            this.$store.commit('setoldsearchval',val)
        }
    }         
  },
  mounted() {},
  //过滤器filter
  filters: {
    convertByte(byteCount) {
      var count = parseFloat(byteCount || 0),
        unitArr = ["b", "Kb", "Mb", "Gb", "Tb"],
        index = 0;
      if (!count) return 0;
      for (let i = 0; i < 5; i++) {
        if (count >= 1024) {
          count = count / 1024;
          index++;
        } else {
          return index > 0
            ? count.toFixed(2) + unitArr[index]
            : count + unitArr[index];
        }
        if (index == 4) {
          return count.toFixed(2) + unitArr[index];
        }
      }
    }
  },
  methods: {
    upPage(type) {
      this.$emit('pageIndex', this.broad_show_item_index - 1);
      this.broad_show_item_index = this.broad_show_item_index - 1;
      this.isTriggerPageUp = false;
      this.isTriggerPageDown = false;
      // 当前页第一条时查询上一页内容
      if (this.broad_show_item_index == 0) {
        this.$emit("searchBroadList", type);
        this.typePage = type;
      }
      this.$forceUpdate();
    },
    broadDelete() {
      this.$emit("broadDelete");
    },
    broadClose() {
      this.$emit("broadClose");
    },
    downFile(item) {
      let _this = this;
      let index = item.attachName.lastIndexOf("\/");
      this.$set(item, "messageId", this.$func.uuid());
      // 新增广播文件下载标识字段flag:'broad'
      let broadItem = Object.assign(item, {flag:'broad'});
      this.$emit("downloadListAddProcess", broadItem);
      let str = item.attachName.substring(index + 1, item.attachName.length);
      let fileName = str.lastIndexOf("."); //取到文件名开始到最后一个点的长度
      let fileNameLength = str.length; //取到文件名长度
      let fileFormat = str.substring(fileName + 1, fileNameLength); //截
      console.log(item,'文件信息');
      let info = _this.$shell("SaveFileUrl", [
        _this.myInfo.id,
        _this.$store.state.url +
          "api/v1/oim/file/download.do?id=" +
          item.attach,
        item.messageId,
        str,
        fileFormat,
        ""
      ]);
      info = JSON.parse(info);
      console.log(info, "下载文件");
      if (info.return_code == "TRUE") {
        this.$Message.success("文件下载中,请稍后");
        this.$set(item, "loading", true);
      };
    },
    openBroadItem(temp){
      this.$emit('openBroadItem',temp)
      this.isDetailItem = false
    },
    itemNext(i){
      let n = this.search_list_array.broad.findIndex(i=>i.messageId==this.recordId)+i
      this.openBroadItem(this.search_list_array.broad[n])
    },    
  },
  components: {},
  created() {}
};
</script>
<style lang="less" scoped>
.broad_main_info{
  display: flex;
  img{
    width: 36px;
    height: 36px;
    margin-right: 12px;
  }
}
.broad_list_detail{
  margin: 0;
  padding: 0;
  width: 100%;
  position: relative;
  box-shadow:none;
  z-index: 1;
  .broad_file_wrap{
    margin-bottom: 10px;
  }
}
.broad_list_first{
  height: 37px;
}
.listInfo{
    height: 66px;
    display: flex;
    align-items: center;
    p{
        padding: 0 12px;
        
    }
    .item{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 6px;
        .title{
            font-size: 14px;
            font-weight: 600;
            img{
                margin-right: 6px;
            }
        }                    
    }
}
    .listInfoBg{
      border-bottom: 1px solid #e5e5e5;
    }
    .listInfoBg:nth-child(even){
        background-color: #f5f5f5;
    }
    .grey{
    color: #999;
}
.select_act{
    background-color: #fff4eb;
    border-top: #ffbb7f solid 1px;
    border-bottom: #ffbb7f solid 1px;
}
</style>
